import Vue from 'vue'
/**
 * author: zuokun
 * 水印
 * text：水印文字
 * font：字体
 * textColor：文字颜色
 * width：宽度
 * height：高度间距（低于文字高度会被替代）
 * textRotate：偏转度 -90到0， 负数值，不包含-90
 */
Vue.directive('watermark', (el, binding) => {
  const text = binding.value.text
  const font = binding.value.font || '16px Microsoft JhengHei'
  const textColor = binding.value.textColor || 'rgba(0,0,0,.1)'
  const width = binding.value.width || 112
  const height = binding.value.height || 84
  const textRotate = binding.value.textRotate || -30

  function addWaterMarker(parentNode) {
    const can = document.createElement('canvas')
    parentNode.appendChild(can)
    can.width = width
    can.height = height
    can.style.display = 'none'
    const cans = can.getContext('2d')
    cans.rotate((textRotate * Math.PI) / 180)
    cans.font = font
    cans.fillStyle = textColor
    cans.textAlign = 'left'
    cans.textBaseline = 'Middle'
    cans.fillText(text, 0, can.height)
    parentNode.style.backgroundImage = `url(${can.toDataURL('image/png')})`
  }
  addWaterMarker(el)
})
